<template>
  <view class="template-mine tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn('/minePages/set')">
        <view class="custom-nav__back">
          <view class="tn-icon-install tn-color-gray" style="font-size: 50rpx;">
          </view>
        </view>
      </view>
    </tn-nav-bar> -->
    
    <!-- 顶部渐变底色，需要的显示出来即可 -->
    <!-- <view class="mine-fixed">
    </view> -->
    
    <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" style="z-index: 9999 !important;">
        <view class="justify-content-item" @click="tn('/minePages/set')">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="logo-pic">
              <view class="logo-image" style="background-image:url('https://resource.tuniaokj.com/images/simple/image2.jpg');width: 110rpx;height: 110rpx;background-size: cover;overflow: hidden;">
              </view>
            </view>
            <view class="tn-padding-right">
              <view class="tn-padding-right tn-padding-left-sm">
                <text class="tn-color-black tn-text-xxl tn-text-bold">不许凶我吖</text>
                <!-- <text class=" tn-round tn-text-xs tn-bg-red tn-color-white tn-margin-left-sm" style="padding: 10rpx 20rpx;">
                  未实名
                </text> -->
              </view>
              <view class="tn-padding-right tn-padding-top-sm tn-padding-left-sm tn-text-ellipsis">
                <text class="tn-color-gray">高级UI设计师</text>
                <text class="tn-color-indigo--disabled tn-padding-left-xs tn-icon-safe"></text>
              </view>
            </view>

          </view>
        </view>
        <view class="justify-content-item" @click="showModal">
          <view class="tn-icon-qr-code tn-color-gray--dark" style="font-size: 50rpx;opacity: 0.8;">
          </view>
        </view>
      </view>
      
      <!-- 没有授权，则显示这个授权按钮-->
      <!-- <view class="tn-flex tn-flex-row-between" @click="tn('/minePages/login')">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button shape="round" backgroundColor="tn-bg-blue--dark" fontColor="#ffffff" padding="20rpx 0" width="40%">
            <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
            <text class="">授权登录</text>
          </tn-button>
        </view>
      </view> -->

      
      <view class="tn-strip-bottom-min tn-padding-top-xl"></view>

      <!-- 更多信息-->
      <!-- 方式12 start-->
      <view class="">
        
        <view class="tn-flex tn-flex-row-between tn-radius tn-padding-top-lg tn-padding-bottom">
          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/file')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
                <view class="tn-icon-folder-upload-fill tn-color-blue"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis">文件助手</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/nav')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
                <view class="tn-icon-task-fill tn-color-blue"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis">快捷导航</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/set')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
                <view class="tn-icon-identity-fill tn-color-blue"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis">账号安全</text>
              </view>
            </view>
          </view>
          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/help')">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-blue--light">
                <view class="tn-icon-help-fill tn-color-blue"></view>
              </view>
              <view class="tn-text-center">
                <text class="tn-text-ellipsis">帮助中心</text>
              </view>
            </view>
          </view>
          
        </view>
      </view>

      <view class="tn-strip-bottom-min"></view>

      <!-- 更多信息-->
      <view class="tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" style="border-radius: 10rpx;">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx" @click="copySource">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #4B98FE;">
              <view class="tn-icon-plane-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-text-lg">开源地址</view>
            <view class="tn-color-gray tn-icon-right"></view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx" @click="tn('/minePages/public')">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #FFAC00;">
              <view class="tn-icon-bookmark-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-text-lg">关注我们</view>
            <view class="tn-color-gray tn-icon-right"></view>
          </view>
        </tn-list-cell>
        <!-- <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx" @click="tn('/minePages/help')">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #957BFE;">
              <view class="tn-icon-message-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-text-lg">常见问题</view>
            <view class="tn-color-gray tn-icon-right"></view>
          </view>
        </tn-list-cell> -->
      </view>
      
      <view class="tn-strip-bottom-min"></view>
      
      <view class="tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" style="border-radius: 10rpx;">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #00D05E;">
              <view class="tn-icon-service-fill"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm tn-text-lg">在线客服</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx">
          <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #FE871B;">
              <view class="tn-icon-tip-fill"></view>
            </view>
            <view class="tn-flex tn-flex-row-between" style="width: 100%;">
              <view class="tn-margin-left-sm tn-text-lg">问题反馈</view>
              <view class="tn-color-gray tn-icon-right"></view>
            </view>
          </button>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" padding="36rpx 30rpx" @click="callPhoneNumber" data-number="18266666666">
          <view class="tn-flex tn-flex-col-center">
            <view
              class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #00C8B0;">
              <view class="tn-icon-phone-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1 tn-text-lg">技术热线</view>
            <view
              class="tn-margin-left-sm tn-color-blue tn-padding-left-xs tn-padding-right-xs tn-bg-gray--light tn-text-sm tn-round">
              188****8888</view>
          </view>
        </tn-list-cell>
      </view>
      
      
      <view class="tn-text-center tn-margin-top-xl tn-padding-bottom-xl" style="opacity: 0.5;">
      	<view @click="navTuniaoUI">
          <text class="tn-color-blue--dark tn-padding-xs">图鸟科技</text>
          <text class="">提供技术支持</text>
        </view>
      </view>

    </view>

    
    <tn-modal v-model="show1" :custom="true">
      <view class="custom-modal-content">
        <image @tap="previewQRCodeImage" src='https://resource.tuniaokj.com/images/advertise/qrcode.jpg' mode='aspectFill' style="width: 100%;"></image>
        <view class="tn-text-center tn-padding-top" @click="copyWechat">
          <text class="">我的好友码：10262008 </text>
          <text class="tn-color-blue--disabled tn-padding-left-xs tn-text-df tn-icon-copy"></text>
          </view>
        <!-- <view class="tn-text-center tn-padding-top tn-text-lg">点击上图，可识别微信二维码</view> -->
        
        <!-- 悬浮按钮-->
        <view class="tn-flex tn-padding">
          <view class="tn-flex-1 justify-content-item tn-text-center">
            <tn-button backgroundColor="#00C8B0 " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round" @click="tn('')">
              <text class="">保存到相册</text>
            </tn-button>
          </view>
        </view>
        
      </view>
    </tn-modal>

    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
  export default {
    name: 'Mine',
    data() {
      return {
        show1: false,
      }
    },
    methods: {
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      
      // 跳转到图鸟UI
      navTuniaoUI() {
        uni.navigateToMiniProgram({
          appId: 'wxf3d81a452b88ff4b'
        })
      },
      
      // 收货地址
      navAddress() {
        uni.chooseAddress({
        })
      },
      
      // 单纯短震动
      short() {
        wx.vibrateShort();
      },
      
      //拨打固定电话
      callPhoneNumber() {
        uni.makePhoneCall({
          phoneNumber: "18219128888",
        });
      },

      
      // 复制id
      copyWechat() {
        wx.vibrateShort();
        uni.setClipboardData({
          data: "10262008",
        })
      },
      
      // 预览作者图片
      previewQRCodeImage() {
        wx.previewImage({
          urls: ['https://resource.tuniaokj.com/images/advertise/qrcode.jpg']
        })
      },
      
      // 弹出模态框1
      showModal(event) {
        this.openModal()
      },
      // 打开模态框
      openModal() {
        this.show1 = true
      },
      
      // 复制开源地址
      copySource() {
        wx.vibrateShort();
        uni.setClipboardData({
          data: "https://ext.dcloud.net.cn/publisher?id=356088",
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .template-mine{
    max-height: 100vh;
    max-width: 640px;
    margin: 0 auto;
  }
  
  /* 新增OA色系，自行调用，或者拿色值去用，多种方式*/
  .oa-black{
    color: #1D2541;
  }
  .oa-blue{
    color: #4B98FE;
  }
  .oa-orangeyellow{
    color: #FFAC00;
  }
  .oa-green{
    color: #00D05E;
  }
  .oa-orange{
    color: #FE871B;
  }
  .oa-cyan{
    color: #00C8B0;
  }
  .oa-indigo{
    color: #00B9FE;
  }
  .oa-orangered{
    color: #FB6A67;
  }
  .oa-purple{
    color: #957BFE;
  }
  
  /* 底部安全边距 start*/
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
    height: calc(140rpx + constant(safe-area-inset-bottom));
  }

  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid #F8F7F8;
  }
  /* 间隔线 start*/
  .tn-strip-bottom-min {
   width: 100%;
   border-bottom: 1rpx solid #F8F7F8;
  }
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    max-width: 640px;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      position: absolute;
    }
  }
  /* 自定义导航栏内容 end */

  .mine-fixed{
    max-width: 640px;
    position: fixed;
    // background-color: rgba(255,255,255,1);
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    background: linear-gradient(90deg, #99E3FE, #DBF2FE);
    top: 0;
    width: 100%;
    height: 450rpx;
    transition: all 0.25s ease-out;
    z-index: -1;
  }
  .mine-fixed:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    mask-image: linear-gradient(to bottom, transparent, black);
    background: linear-gradient(90deg, #FFFFFF, #FFFFFF);	

  }

  /* 用户头像 start */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 8rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  /* 图标容器12 start */
  .icon12 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 15rpx;
        height: 15rpx;
        font-size: 56rpx;
        border-radius: 50%;
        margin-bottom: 38rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
  
      &--icon {
        width: 50rpx;
        height: 50rpx;
        font-size: 50rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
  
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  
  /* 图标容器1 end */
  
  
</style>
